<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
  <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}" />
  <script th:src="@{/js/jquery-3.6.0.min.js}"></script>
  <meta charset="UTF-8">
  <title>添加用户</title>
   <style>
    .checkbox-inline {
      margin-right: 15px; /* 增加右侧间距 */
      display: inline-block; /* 确保每个选项独立显示 */
    }
    .checkbox-inline span {
      padding-right: 25px; /* 增加文字与复选框之间的间距 */
    }
    .checkbox-inline input {
      vertical-align: middle; /* 垂直居中对齐 */
      margin-left: 5px; /* 调整复选框与文字之间的间距 */
    }
  </style>
</head>

<body>
<div class="panel panel-primary">
  <div class="panel-heading">
    <div th:replace="~{header}">
    </div>
  </div>
</div>

<!-- 居中容器 -->
<div class="container">
  <div class="row" style="margin-top: 50px;">
    <!-- 占用左右空间使中间内容居中 -->
    <div class="col-md-3"></div>
    <div class="col-md-6">
      <h4 class="text-center">用户注册</h4>
      <form name="myform" method="post" class="form-horizontal" action="/shopping/user/save">

        <div class="form-group has-success">
          <label class="col-sm-2 control-label">姓名</label>
          <div class="col-sm-10">
            <input type="text" class="form-control" name="username" placeholder="请输入姓名" />
          </div>
        </div>

        <div class="form-group has-success">
          <label class="col-sm-2 control-label">性别</label>
          <div class="col-sm-10 radio">
            <label><input type="radio" name="ssex" value="男" checked>男</label>
            <label><input type="radio" name="ssex" value="女">女</label>
          </div>
        </div>

        <div class="form-group has-success">
          <label class="col-sm-2 control-label">邮寄地址</label>
          <div class="col-sm-10">
            <input type="text" class="form-control" name="mailingaddress" placeholder="请输入邮寄地址" />
          </div>
        </div>

        <div class="form-group has-success">
          <label class="col-sm-2 control-label">手机号</label>
          <div class="col-sm-10">
            <input type="text" class="form-control" name="phone" placeholder="请输入手机号" />
          </div>
        </div>

        <div class="form-group has-success">
          <label class="col-sm-2 control-label">密码</label>
          <div class="col-sm-10">
            <input type="password" class="form-control" name="password" placeholder="以字母开头，只能包含字母、数字和下划线" />
          </div>
        </div>

        <div class="form-group has-success">
          <label class="col-sm-2 control-label">确认密码</label>
          <div class="col-sm-10">
            <input type="password" class="form-control" placeholder="请再次输入密码" />
          </div>
        </div>

         <div class="form-group has-success">
          <label class="col-sm-2 control-label">爱好</label>
          <div class="col-sm-10">
            <span th:each="t : ${hobbycode}">
              <label class="checkbox-inline">
                <span th:text="${t[0]}">爱好名称</span>
                <input type="checkbox" name="hobby" th:value="${t[0]}" th:checked="${t[1] == 'checked'}" />
              </label>
            </span>
          </div>
        </div>

        <div class="form-group">
          <div class="col-sm-offset-2 col-sm-10 text-center">
            <button type="submit" class="btn btn-success">注册</button>
            <span style="display:inline-block;width:20px;"></span>
            <button type="button" class="btn btn-primary" onclick="window.history.back()">返回</button>
          </div>
        </div>

      </form>
    </div>
    <div class="col-md-3"></div>
  </div>
</div>

</body>

</html>